<script setup lang="ts">
import * as echarts from 'echarts'
const charts = ref()
onMounted(() => {
  let myecharts = echarts.init(charts.value)
  // 设置echarts配置项
  myecharts.setOption({
    // 标题组件
    // title: {
    //   text: '水球图'
    // },
    // x|y轴组件
    xAxis: {
      data: ['', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      type: 'category',
      boundaryGap: false // 两边不留白
    },
    yAxis: {
      axisLine: {
        // 轴线
        show: true
      },
      // 刻度
      axisTick: {
        show: true
      },

      splitLine: {
        show: false // 分割线不显示
      }
    },
    // 数据系列
    series: [
      {
        type: 'line',
        data: [110, 1310, 240, 1020, 150, 1030, 360, 199],
        smooth: true, // 平滑
        // 区域填充样式
        areaStyle: {
          color: {
            // 渐变色
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'red' // 0%初的颜色
              },
              {
                offset: 1,
                color: 'blue' // 100%初的颜色
              }
            ],
            global: false
          }
        }
      }
    ],
    // 位置布局
    grid: {
      left: 40,
      right: 20,
      top: 10,
      bottom: 30
    }
  })
})
</script>

<template>
  <div class="box1">
    <div class="top">
      <p class="title">未来7天患者流量趋势图</p>
      <p class="bg"></p>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<style lang="scss" scoped>
.box1 {
  background: url(../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin: 10px 10px 0;
  .top {
    margin: 10px 0 0 10px;
    .title {
      color: white;
      font-size: 20px;
    }
    .bg {
      width: 100px;
      height: 7px;
      background: url(../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }
  .charts {
    width: 100%;
    height: 240px;
  }
}
</style>
